﻿/// <reference path="../jquery-1.4.1-vsdoc.js" />
///  Copyright (c) 2010 Ray Liang (http://www.dotnetage.com)
///  Dual licensed under the MIT and GPL licenses:
///  http://www.opensource.org/licenses/mit-license.php
///  http://www.gnu.org/licenses/gpl.html

(function ($) {
    $.widget("ui.markupable", {
        options: {
            imgBaseUrl: "/Content/Images/wiki/",
            parserUrl: "/Shared/Public/Parsers/wiki.txt",
            width: "auto",
            height: 300,
            bgColor: "white"
        },
        _create: function () {
            this._buildEditor();
            this._buildToolbar();
        },
        _insertMarkup: function (_markup) {
            if ($.browser.msie) {
                this.element.focus();
                this.curSelection = document.selection.createRange();
                this.curSelection.text = _markup.Syntax.replace("{0}", this.curSelection.text);
            }
            else {
                var e = this.element[0];
                if (e.selectionEnd) {
                    var _start = e.selectionStart, _end = e.selectionEnd,
                            _rep = _markup.Syntax.replace("{0}", e.value.substring(_start, _end)),
                            _pre = e.value.substring(0, _start),
                              _last = e.value.substring(_end);
                    e.value = _pre + _rep + _last;
                }
            }
        },
        _buildEditor: function () {
            var self = this, opts = this.options, el = this.element,
                    _w = (opts.width == "auto" || opts.width == "100%") ? "100%" : (opts.width + 5) + "px",
                    _container = $("<div></div>").appendTo(el.parent())
                                                                    .addClass("ui-markupable")
                                                                    .css({
                                                                        "background-color": opts.bgColor,
                                                                        "display":"block"
                                                                        //width: opts.width
                                                                    });
            el.appendTo(_container);
            //this.options.width == "auto" ? _w : this.options.width,
            el.css({
                width: _container.width(),
                height: (opts.height + 56) + "px",
                "background-color": opts.textBGColor,
                "border": "none"
            });

            if (self.isIE()) {
                var ieW = (opts.width == "auto" || opts.width == "100%") ? "100%" : (opts.width + 3) + "px";
                el.css({
                    "overflow": "auto",
                    width: ieW
                });
            }
            this._container = _container;
            _container.resizable({
                alsoResize: this.element,
                handles: "n,s"
            });
        },
        isGecko: function () { return (navigator.userAgent.indexOf('Gecko') != -1) ? true : false; },
        isIE: function () { return $.browser.msie; },
        widget: function () { return this._container; },
        _createToolbarButton: function (_markup, fn) {
            var self = this, _fullUrl = this.options.imgBaseUrl + _markup.Icon;
            var _buttonClick = function () { self._insertMarkup(_markup); };

            if ($.isFunction(fn))
                _buttonClick = fn;


            if (this._toolbar) {
                var hoverCss = { "border-width": "1px", "border-color": "#cccccc", "border-style": "solid" },
                        defaultCss = { "border-width": "1px", "border-color": "#FFFFFF", "border-style": "solid" };
                return $("<li/>").appendTo(this._toolbar)
                                             .addClass("ui-helper-reset")
                                             .css({
                                                 "float": "left",
                                                 "margin-right": "1px",
                                                 "padding": "5px",
                                                 "border-width": "1px",
                                                 "border-color": "#FFFFFF",
                                                 "border-style": "solid"
                                             })
                                             .hover(function () { $(this).css(hoverCss); }, function () { $(this).css(defaultCss); })
                                             .append($("<img/>").attr("src", _fullUrl)
                                                                             .attr("title", _markup.Remarks ? _markup.Remarks : "")
                                                                             .css({
                                                                                 cursor: "pointer",
                                                                                 height: "16px",
                                                                                 width: "16px"
                                                                             })
                                                                             .bind("click", _buttonClick)

                                             );
            }

        },
        _buildToolbar: function () {
            var self = this;
            if (this._container) {
                this._toolbar = $("<ul></ul>").prependTo(this._container)
                                                                           .addClass("ui-helper-reset")
                                                                           .addClass("ui-markupable-toolbar")
                                                                           .css({
                                                                               display: "block",
                                                                               float: "left",
                                                                               margin: "0px",
                                                                               padding: "5px",
                                                                               "padding-left": "0px",
                                                                               "padding-right": "0px",
                                                                               "position": "relative",
                                                                               "border-width": "1px",
                                                                               "border-color": "#cccccc",
                                                                               "border-style": "solid",
                                                                               width: this._container.width() - 2
                                                                           });

                $.ajax({
                    url: this.options.parserUrl,
                    success: function (data) {
                        var p = eval(data);
                        $.each(p.Markups, function (i, n) {
                            if (n.Icon)
                                self._createToolbarButton(n);
                        });
                    }
                });
            }
        }
    });

})(jQuery);       